<script setup>
import { ref } from "vue";
defineProps({
  data: {
    type: Object,
    required: true,
  },
});
</script>

<template>
  <div class="item">
    <div class="title">
      <span style="color: rgb(0, 0, 0)">{{ data.company }}</span>
    </div>
    <div class="content">
      <el-check-tag
        checked
        style="margin-right: 8px; max-width: 160px; "
        >{{ data.station }}</el-check-tag
      >
      <el-check-tag checked style="margin-right: 8px; float: right">{{
        data.salary
          ? data.salary.trim()
            ? data.salary.trim()
            : "面议"
          : "面议"
      }}</el-check-tag>
      <!-- <el-tag><span style="font-size: 14px;color: #5f5f5f">{{ data.station }}</span></el-tag> -->
      <!-- <el-tag class="ml-2"  style="float:right;float:right;"><span style="font-size: 14px; ">{{ data.salary + '元/天' }}</span></el-tag> -->
      <div class="requirement">{{ data.requirement }}</div>
    </div>
  </div>
</template>

<style scoped>
.item {
  width: 384px;
  height: 136px;
  border-radius: 12px;
  /* overflow: hidden; */
  /* color: #ff2d2d; */
  background-color: white;
  margin: 0 16px 16px 0;
}
.publish {
  position: absolute;
  right: 0;
  top: 0;
  width: 80px;
  height: 48px;
  font-size: 14px;
  color: white;
  line-height: 48px;
}
.item:hover {
  box-shadow: 4px 4px 6px 5px rgba(0, 0, 0, 0.2),
    3px 6px 10px 4px rgba(0, 0, 0, 0.19);
  cursor: pointer;
}

.requirement {
  width: 100%;
  font-size: 13px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  color: #5f5f5f;
  word-wrap: break-word;
  margin: 5px 5px 5px 5px;
  font-weight: 400;
  white-space: pre-wrap;
}

.title {
  position: relative;
  height: 48px;
  background: linear-gradient(to right, rgb(234 191 255), rgb(60 205 255));
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
  line-height: 48px;
  font-size: 16px;
}

.content {
  padding: 5px;
}

span {
  margin-left: 10px;
}
</style>
